<template>
<div>
  <div>
          <v-select
              v-model="condF.key"
              auto-select-first
              :items="fieldF"
              outlined
              style="font-size: 16px; color: black; display: inline-block; margin-left: 5%; width: 25%"
          ></v-select>
          <v-text-field label="请输入搜索内容"
                        v-model="condF.content"
                        clearable
                        outlined
                        style="display: inline-block; float: right; margin-right: 5%; width: 64%"
                        v-on:keyup.enter.native="advancedSearch"
          ></v-text-field>
        </div>

  <div v-for="(item, index) in condL.list" :key="index">
        <div style="display: inline-block; margin-left: 2.8%" @click="rmCondList(index)">
          <v-icon>
            {{icons.mdiMinusCircleOutline}}
          </v-icon>
        </div>
        <v-select
            v-model="item[0]"
            auto-select-first
            :items="types"
            outlined
            style="font-size: 16px; color: black; display: inline-block; margin-left: 0%; width: 10%"
        ></v-select>
        <v-select
            v-model="item[1]"
            auto-select-first
            :items="fieldL"
            outlined
            style="font-size: 16px; color: black; display: inline-block; margin-left: 1%;width: 14%"
        ></v-select>
        <v-text-field label="请输入搜索内容"
                      v-model="item[2]"
                      clearable
                      outlined
                      style="display: inline-block; float: right; margin-right: 5%; width: 64%"
                      v-on:keyup.enter.native="advancedSearch"
        ></v-text-field>
      </div>

  <div v-if="origin.flag">
        <div style="display: inline-block; margin-left: 2.8%" @click="rmTime">
          <v-icon>
            {{icons.mdiMinusCircleOutline}}
          </v-icon>
        </div>
        <v-select
            v-model="orig.gte"
            auto-select-first
            label="From"
            :items="times"
            outlined
            style="font-size: 16px; color: black; display: inline-block; margin-left: 0%; width: 10%"
        ></v-select>
        <v-select
            v-model="orig.lte"
            auto-select-first
            label="To"
            :items="times"
            outlined
            style="font-size: 16px; color: black; display: inline-block; margin-left: 1%;width: 14%"
        ></v-select>
      </div>

  <div style="text-align: center">
        <v-btn
            outlined
            color="indigo"
            style="font-size: 16px; width: 17%; margin-bottom: 10px"
            @click="addList"
        >
          <v-icon>
            {{ icons.mdiPlus }}
          </v-icon>
          添加行
        </v-btn>
        <v-btn
            outlined
            color="indigo"
            style="font-size: 16px; margin-left: 3%; width: 17%; margin-bottom: 10px"
            @click="addTime"
            :disabled="orig.flag"
        >
          <v-icon>
            {{ icons.mdiPlus }}
          </v-icon>
          添加日期范围
        </v-btn>
        <v-btn
            outlined
            color="indigo"
            style="font-size: 16px; margin-left: 3%; width: 17%; margin-bottom: 10px"
            @click="rmAll"
            :disabled="!(this.condL.list.length > 0 || this.origin.flag)"
        >
          <v-icon>
            {{ icons.mdiClose }}
          </v-icon>
          清除
        </v-btn>
        <v-btn
            outlined
            color="indigo"
            style="font-size: 16px; margin-left: 3%; width: 17%; margin-bottom: 10px"
            @click="advancedSearch"
        >
          <v-icon>
            {{ icons.mdiMagnify }}
          </v-icon>
          检索
        </v-btn>
      </div>

</div>
</template>

<script>
import {
  mdiMinusCircleOutline,
  mdiPlus,
  mdiClose,
  mdiMagnify,
} from "@mdi/js";

export default {
  name: "SearchCard",
  props:{
    condFirst: Object,
    condList: Object,
    advancedSearch : {
      type: Function
    },
    origin: {
      type: Object
    }
  },
  data() {
    return {
      condF:this.condFirst,
      types:["AND","OR","NOT"],
      fieldF:[ "标题", "所有字段" ],
      fieldL:[ "作者", "出版物标题", "关键词" ],
      cond0:[ "AND", "作者", null],
      condListLength:0,
      condL: this.condList,
      times:[],
      orig: this.origin,
      icons: {
        mdiMinusCircleOutline,
        mdiPlus,
        mdiClose,
        mdiMagnify,
      }
    }
  },
  methods :{
    addList() {
      let tmp = JSON.parse(JSON.stringify(this.cond0))
      this.condL.list.push(tmp)
    },
    rmCondList(index) {
      this.condL.list.splice(index, index + 1);
    },
    rmAll() {
      this.condL.list.splice(0, this.condL.list.length);
      this.rmTime()
    },
    addTime() {
      this.orig.flag = true;
    },
    rmTime() {
      this.orig.flag = false;
      this.orig.gte = null;
      this.orig.lte = null;
    },
  },
  mounted() {
    for (let i = 2021; i >= 1921; i --) {
      this.times.push(i);
    }
  }
}
</script>

<style scoped>

</style>